<template>
	<div class="articleDetail">
  	<div class="container row">
			<div class="sm8">
				<div v-bind:class="{'article-body': true}">
					<div class="title">
						<h1>{{article.title}}</h1>
						<div class="info">
				      <span><i class="iconfont icon-download"></i>{{article.download_count}}</span>
				      <span><i class="iconfont icon-browse"></i>{{article.browse_count}}</span>
				      <span><i class="iconfont icon-date"></i>{{article.show_time}}</span>
						</div>
					</div>
					<div v-bind:class="{'content': true, 'markdown-body':is_markdown }" v-html="article.content">
            {{article.content}}
					</div>
          <commentbox :id="article.id"></commentbox>			
				</div>
        <div class="clear"></div>
			</div>
			<div class="sm4">
				<sidebar></sidebar>
			</div>
  	</div>
	</div>
</template>
<script>
import sidebar from '@/components/sidebar/sidebar'
import commentbox from '@/components/commentbox'
export default {
  name: 'articleDetail',
  data () {
    return {
    	id:0,
    	article:[],
      is_markdown: false,
    }
  },
  created: function(){
  	this.fetchData();
  },
  methods: {
  	fetchData(){
      var that = this;
  		this.id = this.$route.params.id;
  		this.getArticleById();
  	},
  	getArticleById(){
      var that = this;
      this.addArticleBrowse();
      this.$http.post('/api/article/getArticleById', {'id':this.id}).then(function(result){
        var data = result.body.data;
        this.article = data;
        this.is_markdown = (this.article.editor_type == 1 ? true : false );
      })
  	},
    addArticleBrowse(){
      this.$http.post('/api/article/addArticleBrowse', {'id':this.id}).then(function(result){});
    }

  },
  components: {sidebar, commentbox},
  watch: {
    '$route': 'fetchData',
  },
}

</script>
<style type="text/css">
  @import '/static/css/editormd.min.css'
</style>
<style type="text/css">
  .clear{clear: both;}
	.article-body{background-color: #fff;margin: 9px 5px 0px;}
	.articleDetail .title{padding-bottom: 10px;border-bottom: 1px dashed #999;}
	.articleDetail .content{padding:20px;}
	.articleDetail .info{text-align: right;padding-right: 15px;font-size: 12px;}
	.articleDetail .info span{margin-left: 10px;}
	.articleDetail .info span i{margin-right: 5px;}
	.articleDetail .title h1{font-size: 23px;font-weight: 100;text-align: center;padding: 10px 0px;}

  .comment-box{padding: 10px;}
  .comment-box iframe{border: 0px;width: 100%;overflow: auto;}
</style>